<template>
    <el-link
      :type="type"
      :class="['linkStyle',btnClass,nomargin||showOverflowTooltip ? 'nomargin' : '']"
      :style="style"
      :underline="false"
      :disabled="dis"
      :icon="load?'el-icon-loading':icon"
      @click="handleClick"
      v-on="new$listeners"
    >
     
      <slot></slot>
      1122
      {{ $t('common.tip') }}
    </el-link>
  </template>
  
  <script>
  // import mcOverflowTooltip from '@/components/mc-ui/tooltip/mc-overflow-tooltip.vue'
  import { cloneDeep } from 'lodash'
  /**
   * @group 单个组件的封装 mc-ui
   * 二次封装带下划线的文字按钮组件，文字hover/click时为蓝色，禁止点击(disabled或loading)时为灰色
   * 可以修改文字颜色如 :btn-style="{color:'#333'}"，此方方式仅修改静态时的样式，不会修改hover/click/loading时的样式
   * 注意：使用showOverflowTooltip时，动态更新slot内容有可能会使气泡内容没有更新，此时在组件上绑定key可触发强制更新
   */
  export default {
    components: {
    },
    props: {
      type: {
        type: String,
        default: 'primary'
      },
      // 是否开启loading，开启后会禁止点击并且出现loading的icon
      loading: {
        type: Boolean,
        default: false
      },
      // 按钮类名
      btnClass: {
        type: String,
        default: ''
      },
      // 按钮样式
      btnStyle: {
        type: Object,
        default: () => {}
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      icon: {
        type: String,
        default: ''
      },
      // 默认阻止冒泡
      isStopPropagation: {
        type: Boolean,
        default: true
      },
      // 是否不要margin
      nomargin: {
        type: Boolean,
        default: false
      },
      /* 当内容过长将被隐藏且能显示 tooltip，
        默认关闭，主要在table中使用
        tooltip的设置同mcOverflowTooltip组件
        当开启此属性时默认去除margin且width设置为100%
         */
      showOverflowTooltip: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        load: false,
        dis: false
      }
    },
    computed: {
      new$listeners () {
        const listeners = cloneDeep(this.$listeners)
        delete listeners.click
        return listeners
      },
      style () {
        const style = this.showOverflowTooltip ? { maxWidth: '100%' } : {}
        return { ...this.btnStyle,...style }
      },
      contentStyle () {
        const style = {
          'pointer-events': '',
          'cursor': ''
        }
        if (this.dis) {
          style['pointer-events'] = 'none'
          style['cursor'] = 'not-allowed'
        }
        return style
      }
    },
    watch: {
      disabled: {
        immediate: true,
        handler (val) {
          this.dis = val
        }
      },
      loading: {
        immediate: true,
        handler (val) {
          this.load = val
        }
      },
      load: {
        immediate: true,
        handler (val) {
          // loading时禁止点击按钮
          this.dis = val || this.disabled
        }
      }
    },
    methods: {
      // 可通过ref模式调用开启load
      showLoading () {
        this.load = true
      },
      // 可通过ref模式调用关闭load
      hideLoading () {
        this.load = false
      },
      // 点击事件
      handleClick (e) {
        this.isStopPropagation && e.stopPropagation()
        this.$emit('click')
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .linkStyle ::v-deep {
    .el-link--inner{ // 针对mc-link在table中文字溢出优化
      display: inline-block;
      width: 100%;
      // line-height: 23px;
    }
  }
  .linkStyle:not(.nomargin){
    margin: 0 10px;
  }
  .nomargin + .linkStyle{
    margin-left: 15px;
  }
  .mc-link{
    line-height: 1;
  
    &-content{
      width: 100%;
      margin: 0;
      display: flex;
    color: $menuActiveText;
  
      ::v-deep .overflow-tooltip{
        height: auto;
        vertical-align: middle;
      }
  
      >b{
        position: relative;
        width: 100%;
        font-weight: normal;
      }
  
      &:hover{
        color:$menuHover!important;
  
        ::v-deep b::after{
          content: '';
          display: inline-block;
          width: 100%;
          height: 0;
          line-height: 1;
          border-bottom: solid 1px $menuHover;
          position: absolute;
          bottom:1px;
          left: -1px;
        }
      }
    }
  }
  </style>
  <docs lang="md">
    link 组件，本质是a标签

    # 举例
    ```jsx  
    <mc-link>3344 {{$t('common.tip')}}</mc-link>
    ```
    ```jsx  
    <mc-link>点击</mc-link>
    ```
    ```jsx  
    <mc-link :show-overflow-tooltip="true">这里是测试overferflow长度的，所以内容上面是越长也好，无论现实的是什么都是正的，不要急保护摇晃，这里是测试overferflow长度的，所以内容上面是越长也好，无论现实的是什么都是正的，不要急保护摇晃</mc-link>
    ```
  </docs>